<template>
    <div>
     <h1>门店列表显示</h1>
     <div>
        门店名称:<input type="text" v-model="info.ShopName">创建时间:<input type="date" v-model="info.Time1">~<input type="date" v-model="info.Time2">
        <input type="button" value="查询" class="btn btn-primary" @click="show">

        <input type="button" value="批量删除" class="btn btn-danger" @click="DelShopall">

        <input type="button" value="批量启用" class="btn btn-success" @click="UpdateAllState(1)">
        <input type="button" value="批量禁用" class="btn btn-info" @click="UpdateAllState(0)">
     </div>
     <table class="table table-bordered">
        <tbody>
            <tr class="bg-success">
                <td>
                    <input type="checkbox" v-model="checked" @click="Checkall">全选/全不选
                </td> 
                <td>编号</td>
                <td>门店名称</td>
                <td>分店名称</td>
                <td>门店地址</td>
                <td>门店图片</td>
                <td>联系电话</td>
                <td>门店状态</td>
                <td>门店介绍</td>
                <td>注意事项</td>
                <td>交通信息</td>
                <td>创建时间</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list":key="item.Sid">
                <td>
                    <input type="checkbox" v-model="ids" :value="item.Sid" @change="CheckOne">
                </td> 
                <td>{{item.Sid}}</td>
                <td>{{item.ShopName}}</td>
                <td>{{item.BranchName}}</td>
                <td>{{item.Address}}</td>
                <td><img :src="item.Photo" width="50" height="50" alt=""></td>
                <td>{{item.Phone}}</td>
                <td>{{item.State==1?'启用':'禁用'}}</td>
                <td>{{item.Desc}}</td>
                <td>{{item.Notice}}</td>
                <td>{{item.Traffic}}</td>
                <td>{{moment(item.CreteTime).format('YYYY-MM-DD hh:mm:ss')}}</td>
                <td>
                    <input type="button" value="修改" class="btn btn-primary" @click="update(item.Sid)">
                    <input type="button" value="删除" class="btn btn-danger" @click="del(item.Sid)">
                    <input type="button" value="详情" class="btn btn-success" @click="detail(item.Sid)">
                    <input type="button" value="启用" class="btn btn-success" v-if="item.State==0" @click="updstate(item.Sid)">
                    <input type="button" value="禁用" class="btn btn-success" v-if="item.State==1" @click="updstate(item.Sid)">
                </td>
            </tr>
        </tbody>
     </table>

     <div>
        <!-- 分页 改变当前页 -->
        <span>共<b style="color: red;">{{data.totalCount}}</b>条</span>
        <span>每页<b style="color: red;">{{info.pagesize}}</b>条</span>
        <span>共<b style="color: red;">{{info.pageindex}}</b>/<b style="color: red;">{{data.totalPage}}</b>页</span>
        <input type="button" value="首页" @click="gopage(1)">
        <input type="button" value="上一页" @click="gopage(info.pageindex-1)">
        <span v-for="item in data.totalPage" @click="gopage(item)">{{item}}</span>
        <input type="button" value="下一页" @click="gopage(info.pageindex+1)">
        <input type="button" value="尾页" @click="gopage(data.totalPage)">
        <!-- 跳转页 -->
        <input type="number" v-model="info.pageindex">
        <input type="button" value="跳转" @click="gopage(info.pageindex)">
        <!-- 改变也容量 -->
         页容量:
        <select v-model="info.pagesize" @change="show">
            <option :value="item" v-for="item in arr">每页{{item}}条</option>
        </select>
    </div>
    </div>
</template>

<script setup lang="ts">
//响应式数据
import {ref,reactive,onMounted} from 'vue';
import axios from 'axios';
import moment from 'moment';
//跳转
import {useRouter,useRoute} from 'vue-router';
const router=useRouter();
const route=useRoute();



//向后端传递的查询参数
let info:any=reactive({
    pageindex:1,
    pagesize:2,
    ShopName:'',
    Time1:'',
    Time2:'',
})
//声明变量接收数据
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})
//生命周期函数
onMounted(()=>{
    getlist();
})
//------------------------------分页------------------
//分页
const gopage=(num:any)=>{
    console.log(num);

    if(num>=1 && num<=data.totalPage){
        info.pageindex=num;
        getlist();
    }
    else{
        alert('超出页码范围');
        return;
    }
    
}
//声明一个变量表示页容量
let arr:any=ref([2,4,6,8]);
//回到首页
const show=()=>{
    info.pageindex=1;
    getlist();
}
//----------------------批量操作---------------------

//声明一个变量控制单个复选框与没有选中(全选/全不选)
let checked:any=ref(false);
//声明一个变量控制多个复选框选中与没有选中(数据复选框)
let ids:any=ref([]);

//实现全选/全不选
const Checkall=()=>{
    //全选/全不选按钮勾选和没勾选
    checked.value=!checked.value;
    //如果全选按钮选中为true,把列表data.list的所有id值放到ids里
    if(checked.value==true){
        ids.value=data.list.map((item:any)=>{
            return item.Sid;
        });   
    }
    //否则没选中 ids数组为空
    else{
        ids.value=[];
    }
}
//反选(当复选框的选中长度==data.list的程度就是全选按钮被勾选)
const CheckOne=()=>{
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    //否则全选按钮不勾选
    else{
        checked.value=false;
    }
}
//-------------------------------------------------------


//获取门店列表
const getlist=()=>{
    console.log(info);
    axios({
        url:'https://localhost:7193/api/Shop/GetShoplist',
        method:'get',
        params:info,
    })
    .then(res=>{
        console.log(res);
        Object.assign(data,res.data);
    })
}
//---------------------------删除--------------------------------
//删除
const del=(id:any)=>{
    if(confirm('确认删除吗?')==true){
        axios({
            url:'https://localhost:7193/api/Shop/DelShop',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getlist();;
            }
            else{
                alert('删除失败');
                return;
            }
        })

    }
}
//------------------------------修改反填----------------------------
//反填跳转
const update=(id:any)=>{
    router.push({
        path:'/shopupdate',
        query:{
            id:id
        }
    })
}
//详情
const detail=(id:any)=>{
    router.push({
        path:'/shopdeteil',
        query:{
            id:id
        }
    })

}
//--------------------------------单个修改状态
const updstate=(id:any)=>{
    if(confirm('确认修改状态吗?')==true){
        axios({
            url:'https://localhost:7193/api/Shop/UpdateShopstate',
            method:'put',
            params:{
                id:id
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                getlist();
            }
            else{
                alert('修改失败')
            }
        })
    }
}
//--------------------------------批量删除------------------
const DelShopall=(id:any)=>{
    //友好提示
    if(ids.value.length==""){
        alert('请勾选要删除数据');
        return;
    }
    //删除操作
    else if(confirm('确认删除吗?')==true){
        axios({
            url:'https://localhost:7193/api/Shop/DelAllshop',
            method:'delete',
            params:{
                ids:ids.value.toString(),
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                checked.value=false;
                getlist();
            }
            else{
                alert('删除失败');
                checked.value=false;
            }
        })
    }
}
//--------------------------------批量修改----------------------
const UpdateAllState=(State:any)=>{
    //友好提示
    if(ids.value.length==""){
        alert('请勾选要修改的数据');
        return;
    }
    //删除操作
    else if(confirm('确认修改吗?')==true){
        axios({
            url:'https://localhost:7193/api/Shop/UpdateShopStateall',
            method:'put',
            params:{
                ids:ids.value.toString(),
                State:State,
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert('修改成功');
                checked.value=false;
                getlist();
            }
            else{
                alert('修改失败');
                checked.value=false;
            }
        })

    }
}
</script>

<style scoped>
span{
margin: 0 10px;
}
input{
    margin: 0 5px;
}
</style>